<template>
    <div class="header-container">
        <div class="title">{{title}}</div>
        <div class="info left"><p class="returnbox" @click="$router.push('/')" v-if="name!=='Home'">返回</p><p><i class="el-icon-sunny" style="padding-right:10px;font-size:24px"></i>{{weather}}</p></div>
        <div class="info right">{{dateInfo}}</div>
    </div>
</template>
<script>
export default {
    props: {
        title: String,
        name: String
    },
    data() {
        return {
            weather: '东阳市 26°C 晴',
            dateInfo: '',
            myInterval: null
        }
    },
    mounted() {
        this.startTimer();
    },
    beforeDestroy() {
        if (this.myInterval != null) {
            clearInterval(this.myInterval);
            this.myInterval = null;
        }
    },
    methods: {
        getCurrTime() {
            //10:25:25 星期二 2022.5.27
            let date = new Date();
            this.dateInfo = `${this.formatNumber(date.getHours())}:${this.formatNumber(date.getMinutes())}:${this.formatNumber(date.getSeconds())}`
                + `  ${this.getDayOfWeek(date.getDay())}  `
                + `${date.getFullYear()}.${date.getMonth() + 1}.${date.getDate()}`;
        },
        startTimer() {
            this.getCurrTime();
            if (this.myInterval != null) {
                clearInterval(this.myInterval);
                this.myInterval = null;
            }
            this.myInterval = setInterval(() => {
                this.getCurrTime()
            }, 1000);

        },
        formatNumber(target) {
            if (target < 10) return "0" + target;
            return target;
        },
        getDayOfWeek(target) {
            let array = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
            return array[target]
        }
    }
}
</script>
<style lang="less" scoped>
.header-container {
    width: 100%;
    height: 100px;
    background-image: url('../assets/header-bg.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
}
.title {
    font-family: FZDBSJW--GB1-0;
    font-size: 46px;
    color: #FFFFFF;
    letter-spacing: 2.76px;
    text-align: center;
    line-height: 100px;
    text-shadow: 0 2px 4px rgba(5,23,46,0.61);
    font-weight: 400;
}
.info {
    font-family: PingFangSC-Regular;
    font-size: 16px;
    color: #FFFFFF;
    letter-spacing: 0;
    line-height: 100px;
    font-weight: 400;
}
.left {
    position: absolute;
    left: 20px;
    top: 0;
    display: flex;
    justify-content: start;
  align-items: center;
  .returnbox{
    background:url(../assets/dot_return.svg) no-repeat left center;
    padding-left:30px;
    padding-right:10px;
    cursor: pointer;
  }
}
.right {
    position: absolute;
    right: 20px;
    top: 0;
}

</style>
